<template>
  <div class="search">
    <div class="search__header">
      <div class="back">
        <img src="@/assets/images/back.png" @click="toBack"/>
      </div>
      <div class="center">
        <van-search
          v-model="value"
          background="transparent"
          shape="round"
          placeholder="请输入搜索关键词"
        />
      </div>
      <div class="right">
        <img src="@/assets/images/more.png" @click="showMore"/>
      </div>
    </div>
    <div class="search__content">
      <NoSearch></NoSearch>
    </div>
  </div>
</template>
<script setup>
import { useRoute } from "vue-router";
import NoSearch from "./NoSearch.vue";
const route = useRoute();
const value = route.query.value;
const toBack = () => {
  window.history.back();
}
</script>
<style lang="scss" scoped>
.search {
  min-height: 100vh;
  background-color: #fff;
  &__header {
    display: flex;
    align-items: center;
    padding: 8px 0;
    .center {
      flex: 1;
      background-color: #f4f6fa;
      border-radius: 18px;
      ::v-deep .van-search {
        padding: 0;
      }
      ::v-deep .van-search__content {
        background-color: transparent;
      }
    }
    .back,
    .right {
      width: 40px;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 24px;
        height: 24px;
      }
    }
  }
}
</style>
